<!doctype html>
<html ng-app='expanderModule'>
<meta charset="utf-8"/>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="test/angular.js"></script>
    <script>
        function Ctrl($scope) {
            $scope.title = 'Lorem Ipsum';
            $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';

            console.log('scope1', $scope);
        }

    </script>
    <style>
        .expander {
            border: 1px solid black;
            width: 250px;
        }

        .expander > .title {
            background-color: black;
            color: white;
            padding: .1em .3em;
            cursor: pointer;
        }

        .expander > .body {
            padding: .1em .3em;
        }
    </style>
</head>
<body>

<div ng-controller="Ctrl">
    <input ng-model="title"><br>
    <input ng-model="type"><br>
    <input ng-model="time"><br>
    <textarea ng-model="text"></textarea> <br/>
    <pane title="{{title}}">
            <span class="time">time</p>
                <p class="type">{{type}}<p>
            <p class="content">{{text}}<p>
    </pane>
</div>

</body>
<script src="test/directive.js"></script>
</html>